<template>
  <div>
    <el-collapse accordion>
      <el-table :data="display"  stripe>
        <el-table-column prop="name" label="订单">
          <template slot-scope="scope">
            <el-collapse-item :name="scope.row.id">
              <template slot="title">
                <div style="margin-left: 16px">
                  <i class="el-icon-time"></i>
                  <span>&nbsp; {{ scope.row.createTime.substring(0, 10) }} &nbsp;</span>
                  <i class="el-icon-goods"></i>
                  <span style="font-weight: bold;">&nbsp; {{ scope.row.orderItemList[0].name }}</span>
                  <span>&nbsp; x{{scope.row.orderItemList[0].number}} &nbsp;</span>
                  <i class="el-icon-more" v-show="scope.row.orderItemList.length > 1"></i>
                </div>
              </template>

              <div style="margin: 16px 48px">
                <div class="item-container" v-for="item in scope.row.orderItemList">
                  <el-image
                      class="item-image"
                      :src="item.image"
                      :alt="scope.row.orderItemList[0].name"
                      fit="cover">
                  </el-image>

                  <div class="text-content">
                    <h3>{{item.name}}</h3>
                    <span style="display: block">单价：¥{{item.price}}</span>
                    <span style="display: block">数量：x{{item.number}}</span>
                    <span style="display: block">总计：¥{{item.totalPrice}}</span>
                  </div>
                </div>

                <div>
                  <i class="el-icon-info"></i>
                  <span>&nbsp;订单编号：{{ scope.row.ordersNumber.substring(10) }}</span>
                </div>
                <div>
                  <i class="el-icon-time"></i>
                  <span>&nbsp;创建时间：{{ scope.row.createTime }}</span>
                </div>
                <div>
                  <i class="el-icon-time"></i>
                  <span>&nbsp;支付时间：{{ scope.row.payTime ? scope.row.payTime : '未支付' }}</span>
                </div>
                <div>
                  <i class="el-icon-location"></i>
                  <span>&nbsp;收获地址：{{ scope.row.address ? scope.row.address : '暂未留下地址' }}</span>
                </div>
              </div>
            </el-collapse-item>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name:"Orders",
  data() {
    return {
      user: null,
      display: []
    }
  },
  created() {
    this.user = this.$store.state.user
    request.get("/orders/getUserOrders?userId=" + this.user.id).then((res)=>{
      console.log('getUserOrders-res :>> ', res);
      const display = res.data.data.sort((a, b) => a.createTime.localeCompare(b.createTime)).reverse();
      display.forEach(item => {
        item.createTime = this.formatData(item.createTime)
        item.payTime = this.formatData(item.payTime)
      })
      this.display = display;
    })
  },
  methods: {
    formatData(input){
      if (!input) {
        return null
      }
      const date = new Date(input);

      const yyyy = date.getFullYear();
      const MM = String(date.getMonth() + 1).padStart(2, '0');
      const dd = String(date.getDate()).padStart(2, '0');
      const HH = String(date.getHours()).padStart(2, '0');
      const mm = String(date.getMinutes()).padStart(2, '0');
      const ss = String(date.getSeconds()).padStart(2, '0');

      return `${yyyy}-${MM}-${dd} ${HH}:${mm}:${ss}`;
    }
  }
}
</script>

<style>
.item-container {
  display: flex;
  align-items: flex-start;
}
.item-image {
  margin-right: 20px;
  margin-bottom: 20px;
  width: 128px;
  height: 128px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
}
.text-content {
  display: flex;
  flex-direction: column;
}
.text-content h3 {
  margin: 16px 0 8px 0;
}
.text-content p {
  margin: 0;
}
</style>